<template>
  <div style="marginLeft:20px;marginRight:20px">
    <el-table
      style="width: 100%;overflow:hidden"
      :data="comtable"
      border
      stripe
    >
      <el-table-column prop="arName" label="文章"></el-table-column>
      <el-table-column prop="date" label="时间" width="200"></el-table-column>
      <el-table-column
        prop="fromUser"
        label="fromUser"
        style="marginRight:5px"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="toUser"
        label="toUser"
        width="100"
      ></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleInfo(scope.row)" type="text" size="small"
            >详情</el-button
          >
          <el-button @click="handleEdit(scope.row)" type="text" size="small"
            >标为已读</el-button
          >
          <el-button @click="handleReply(scope.row)" type="text" size="small"
            >回复</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total ,prev, pager, next ,jumper"
        :total="count"
        :page-size="mount"
      ></el-pagination>
    </div> -->
    <el-dialog width="30%" title="详情" :visible.sync="dialogTableVisible">
      <div class="namebox">
        <span class="from">{{ row.fromUser }}</span>
        <span>回复</span>
        <span class="to">{{ row.toUser }}</span>
      </div>
      <div class="c_content" v-html="row.content"></div>
    </el-dialog>
    <el-dialog width="50%" title="回复" :visible.sync="isShow">
      <com-item @handleCom="handleCom"></com-item>
    </el-dialog>
  </div>
</template>
<script>
import { GetreadCom, DeleteRead, PostChild } from "../../api/index"
import comItem from "../../components/comment/comitem"
export default {
  data() {
    return {
      loading: true,
      isShow: false,
      keyword: "",
      comtable: [],
      count: null, //总页数
      mount: 10, //每页展示数据的条数
      currentpage: 1,
      row: {},
      dialogTableVisible: false,
      options: [
        {
          value: "category",
          label: "按分类查找",
        },
        {
          value: "title",
          label: "按标题查找",
        },
      ],
      value: "title",
    }
  },
  mounted() {
    setTimeout(() => {
      this.comtable = this.$store.getters.getUnReadCom
    }, 0)
  },
  components: {
    comItem,
  },
  methods: {
    // 查看详情
    handleInfo(row) {
      this.row = row
      this.dialogTableVisible = true
    },
    // 点击标为已读
    async handleEdit(row) {
      let result = await DeleteRead({
        _id: row._id,
      })
      let res = await GetreadCom()
      this.$store.commit("pushCom", res.data)
      this.comtable = this.$store.getters.getUnReadCom
    },
    handleReply(row) {
      this.isShow = true
      this.row = row
    },
    // 当页码发生改变时
    handleCurrentChange(val) {
      this.currentpage = val
      this.currentData()
    },
    async handleCom(child) {
      let req = {
        fromUser: child.fromUser,
        c_content: child.c_content,
        c_date: this.dateFormat("YYYY-mm-dd HH:MM:SS", child.c_date),
        toUser: {
          name: this.row.fromUser,
          isAuthor: false,
        },
        parentId: this.row.parentId,
      }
      let result = await PostChild(req)
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          )
        }
      }
      return fmt
    },
  },
}
</script>
<style lang="scss" scoped>
.pagination {
  margin: 10px 0px;
  text-align: right;
}

.el-input {
  margin: 0px 20px;
  margin-bottom: 20px;
}
.el-select {
  width: 150px;
}
.namebox {
  span {
    font-size: 15px;
    color: rgb(177, 175, 175);
  }
  .from {
    margin-right: 10px;
    color: rgb(79, 81, 83);
  }
  .to {
    margin-left: 10px;
    color: rgb(79, 81, 83);
  }
}
.c_content {
  font-size: 20px;
  margin-top: 20px;
}
</style>
